<template>
  <div class="hm-collect">
    <HmHeader>
      <template> 我的点赞 </template>
    </HmHeader>
    <!-- <HmItem
      v-for="(item, index) in list"
      :key="item.id"
      :item="list[index]"
    ></HmItem> -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        loading-text="加载中..."
        @load="onLoad"
      >
        <van-cell v-for="(item, index2) in list" :key="item.id">
          <HmItem :item="list[index2]"></HmItem>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
import HmItem from "@/components/HmItem.vue";
import HmHeader from "@/components/HmHeader.vue";
export default {
  name: "HmCollect",

  data() {
    return {
      list: [],
      token: localStorage.getItem("token"),
      loading: false,
      finished: false,
      refreshing: false,
      page: 0,
    };
  },
  components: {
    HmItem,
    HmHeader,
  },
  activated() {
    // 重置数据
    this.page = 0;
    this.list = [];
    this.finished = false;
    this.loading = false;
    // 重新获取数据
    // this.getCollect();
  },
  methods: {
    async getCollect() {
      //http://interview-api-t.itheima.net/h5/interview/opt/list

      const res = await axios.get(
        "http://interview-api-t.itheima.net/h5/interview/opt/list",
        {
          params: {
            optType: 1,
            pageSize: 5,
            page: this.page,
          },
          headers: { Authorization: `Bearer ${this.token}` },
        }
      );
      if (res.data.data.rows.length === 0) {
        this.finished = true;
      }
      this.list = this.list.concat(res.data.data.rows);
    },
    async onLoad() {
      // 异步更新数据
      //进入加载状态
      this.page += 1;
      await this.getCollect();

      // 加载状态结束
      this.loading = false;

      // 数据全部加载完成
      // if (this.list.length >= 10) {
      //   this.finished = true;
      // }
    },
    async onRefresh() {
      // 清空列表数据
      this.page = 1;
      this.list = [];
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      // this.onLoad();
      await this.getCollect();
      this.loading = false;
      // 加载状态结束
      this.refreshing = false;
    },
  },
};
</script>

<style scoped></style>
